<template>
  <!-- 排量统计 -->
  <view class="conter">
    <cc-dateA title='排量统计' text='筛选日期' color='#fff' frist="日" second="月" third="年" fourth="自定义" @confirm="confirm_a">
    </cc-dateA>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_word">
        <ms-dropdown-menu>
          <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
        </ms-dropdown-menu>
      </view>
    </view>
    <!-- <navigator class="head" url="../displacement_a/displacement_a">
      徽州区
    </navigator> -->
    <view v-if="value==0">
      <view class="card_box">
        <view class="card_a">
          徽州区TVOC排量前六
        </view>
        <view class="region">
          <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
        </view>
      </view>
      <view class="card_height">
        <view class="card_b">
          TVOC排量详情
        </view>
        <view class="region">
          <scroll-view scroll-x="true">
            <view class="scroll">
              <echarts :option="option1" style="height: 600rpx;width: 3000rpx;" @click="echartsClick"></echarts>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="box" v-if="value!==0">
      <view class="box_a">
        总排放量
      </view>
      <view class="box_b">
        {{total}}kg
      </view>
    </view>
    <view class="card_p" v-if="value!==0">
      <view class="card_t">
        排量详情
      </view>
      <view class="region">
        <scroll-view scroll-x="true">
          <view class="scroll">
            <echarts :option="option2" style="height: 600rpx;width: 3000rpx;" @click="echartsClick"></echarts>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  var _self;
  var canvaPie = null;
  var canvaColumn = null;
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        value: 0,
        All_enterpriseList: [],
        enterprise_id: '',
        date: '',
        total: '0',
        choice: '',
        option: {
          legend: {
            top: 'bottom'
          },
          series: [{
            // name: '面积模式',
            label: {
             show: false
            },
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }]
        },
        option1: {
          xAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 5
              }
            },

            type: 'category',
            data: []
          },
          yAxis: {
            nameTextStyle: {
              fontSize: 5
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 5
              }
            },
            name: '排量',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        },
        option2: {
          xAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 5
              }
            },
            type: 'category',
            data: []
          },
          yAxis: {
            nameTextStyle: {
              fontSize: 5
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 5
              }
            },
            name: '排量',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        }
      }
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
      mileage(e) {
        this.value = e.value
        this.enterprise_id = e.id
        // this.getStatistics()
        // console.log('enterprise_id',this.enterprise_id);
      },
      // 查询企业的总数和企业检测详情
      getAll_enterprise() {
        this.$http.get('/device/group/customerId', {}).then(res => {
          // console.log('res', res)
          if (res.code == '00000') {
            const list = []
            res.data.forEach((item, index) => {
              list.push({
                text: item.abbreviation,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '徽州区',
              value: 0
            })
            // console.log('list', list)
            this.All_enterpriseList = list
          }
        })
      },
      getStatistics() {
        this.$http.get('/envirnment-air/app/analysis/outletValue/outletCount', {
          date: this.date,
          dateType: this.choice,
          enterpriseId: this.enterprise_id
        }).then(res => {
          console.log(res);
          let List = []
          const timeList = []
          const valueList = []
          // 圆图
          List = res.data.topN
          // 柱状图
          res.data.counts.forEach((item, index) => {
            timeList.push(item.key)
            valueList.push(item.value)
          })
          // console.log(valueList)
          this.option.series[0].data = List
          this.option1.xAxis.data = timeList
          this.option1.series[0].data = valueList
          this.option2.xAxis.data = timeList
          this.option2.series[0].data = valueList
          this.getAllvalue(valueList)
          this.$refs.update(this.option)
          this.$refs.update(this.option1)
          this.$refs.update(this.option2)
        })
      },
      getAllvalue(arr) {
        // console.log('总量',arr)
        let s = 0
        arr.forEach((item, index, arr) => {
          s += item
        })
        this.total = s
        // console.log('总数量', this.total)
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        this.getStatistics()
        console.log('fjowefjie', e)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height: 100vh;
    background: #F7F7F7;
    // overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }

  .head {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .card_a {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .region {
    width: 100%;

    scroll-view {
      width: 100%;
    }
  }

  .scroll {
    width: 100%;
    transform: translate(-34%, -1%);
  }

  .card_b {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .card_box {
    width: 662rpx;
    padding: 20rpx;
    margin: 20rpx auto 0;
    border-radius: 8rpx;
    background-color: #FFFFFF;
  }

  .card_height {
    width: 662rpx;
    padding: 20rpx;
    margin: 20rpx auto 0;
    height: 620rpx !important;
    border-radius: 8rpx;
    background-color: #FFFFFF;
  }

  .box {
    width: 702rpx;
    height: 298rpx;
    margin: 0 auto;
    background: url(../../static/bg_slices/bg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .box_a {
    text-align: center;
    margin-top: 84rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .box_b {
    text-align: center;
    font-size: 58rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
  }

  .card_p {
    width: 702rpx;
    margin: 20rpx auto;
    height: 620rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }

  .card_t {
    margin: 20rpx 0 0 24rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
